<template>
	<view>
		<u-icon
			size="22rpx"
			labelPos="left"
			labelSize="30rpx"
			:labelColor="showFilterLight ? '#588BF3' : '#333333'"
			:color="showFilterLight ? '#588BF3' : '#333333'"
			label="筛选"
			:name="showOverlay ? 'arrow-up-fill' : 'arrow-down-fill'"
			@click="openFilterHandler"
		/>
		<u-transition :customStyle="overlayTransitionStyle" :duration="300" :show="showOverlay" custom-class="overlay" mode="fade" @click.stop="boxClick">
			<view class="openBox" @click.stop>
				<view class="statusBox">
					<u-checkbox-group v-model="filterValue" @input="checkboxChange" placement="column" iconPlacement="right">
						<u-checkbox
							:labelSize="labelSize"
							:iconSize="iconSize"
							:labelColor="color(item.value) ? '#588BF3' : '#666666'"
							shape="circle"
							:customStyle="{ marginBottom: '16px' }"
							v-for="(item, index) in checkboxList"
							:key="item.value"
							:label="item.name"
							:name="item.value"
							:disabled="filterValue.includes('-1') && item.value !== '-1'"
						></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="bottomBottons flex_wrap row_around row_middle">
					<u-icon
						name="/static/img/conference/reseticon.png"
						color="#333333"
						size="28"
						label="重置"
						bold
						labelSize="28rpx"
						width="36rpx"
						height="36rpx"
						@click="resetParams"
					></u-icon>
					<u-button
						type="primary"
						iconColor="#588BF3"
						text="确定"
						shape="circle"
						:hairline="false"
						size="normal"
						:customStyle="buttonCustomStyle"
						:disabled="disabelButton"
						@click="confirmParams"
					/>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
export default {
	name: 'FilterMultiple',
	data() {
		return {
			labelSize: uni.upx2px(30),
			iconSize: uni.upx2px(38),
			filterValue: ['-1'],
			showOverlay: false,
			overlayToTop: uni.upx2px(140),
			buttonCustomStyle: {
				width: '400rpx',
				height: '70rpx',
				margin: 0
			},
			checkboxList: [
				{
					name: '全部',
					value: '-1'
				},
				{
					name: '审核中',
					value: '0'
				},
				{
					name: '已通过',
					value: '1'
				},
				{
					name: '未通过',
					value: '2'
				},
				{
					name: '已撤销',
					value: '3'
				}
			]
		};
	},
	computed: {
		showFilterLight() {
			return this.showOverlay || !this.disabelButton;
		},
		color() {
			return value => {
				return this.filterValue.some(item => item === value);
			};
		},
		disabelButton() {
			return this.filterValue.length === 0;
		},
		// 计算筛选下拉框的样式
		overlayTransitionStyle() {
			return {
				position: 'fixed',
				top: this.overlayToTop + 'px',
				left: 0,
				right: 0,
				bottom: 0,
				height: `calc(100vh - ${this.overlayToTop})`,
				'background-color': 'rgba(0, 0, 0, 0.3)',
				zIndex: 100
			};
		}
	},
	methods: {
		confirmParams() {
			const params = this.filterValue.includes('-1') ? [] : this.filterValue;
			this.$emit('confirm', params);
			this.showOverlay = false;
		},
		resetParams() {
			this.filterValue = ['-1'];
			this.$emit('confirm', []);
			this.showOverlay = false;
		},
		boxClick() {
			this.showOverlay = false;
		},
		checkboxChange(e) {
			console.log(e);
		},
		openFilterHandler() {
			this.showOverlay = !this.showOverlay;
		}
	}
};
</script>

<style lang="scss" scoped>
.openBox {
	width: 100%;
	height: 636rpx;
	background-color: #fff;
	position: relative;
	.bottomBottons {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.25);
	}
	.statusBox {
		padding: 0 28upx;
		box-sizing: border-box;
	}
}
</style>
